<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>我是{{name}}</h2>
        <img v-bind:src="url" alt="" :width="w">
        <input type="text" v-model="hobby"/>
        <hr>
        单选：<input type="radio" value="nan" v-model="gender" id="nan"> <label for="nan">男</label> 
        <input type="radio" value="nv" v-model="gender" id="nv"> <label for="nv">女</label>

        <hr>
        爱好：
        <input type="checkbox" v-model="aihao" value="eat">吃饭
        <input type="checkbox" v-model="aihao" value="sleep">睡觉
        <input type="checkbox" v-model="aihao" value="play">打游戏

        <hr>
        城市
        <select v-model="city">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="sz">深圳</option>
        </select>
    </div>
    <script>
        const VM = new Vue({
            el:'#root',//将VM实例和容器关联起来
            data(){
                return {
                    name: '张鑫',
                    url:'http://api.xiaohigh.com/image/random',
                    w:500,
                    hobby:'喜欢',
                    gender:'nv',
                    aihao:['eat'],
                    city:'bj'
                }
            }
        });
    </script>
</body>
</html>